<template>
	<view class="">
		<view class="room" @click="closePopWindow" :class="{paddingbottom:chatBottom}">
			<view class="tips" :class="{ show: isLoading }">正在获取消息</view>
			<view class="room-content-box">
				<view :id="'chat' + index" v-for="(item, index) in messageList" :key="index">
					<chat-message :message="item" :shopInfo="shopInfo" :userInfo="userInfo" @sendGood="sendGood($event,index)" @sendOrder="sendOrder($event,index)" :send="send"></chat-message>
				</view>
			</view>
		</view>
		
		<view class="input-content" >
			<view class="input-box">
				
				<!-- <view class="iconfont iconwenjian ns-padding-right"></view> -->
				<input
					type="text"
					class="message"
					placeholder="点此提问客服"
					id="input"
					v-model="formData.content"
					:confirm-type="'send'"
					placeholder-style="color:#DDDDDD;"
					:cursor-spacing="10"
					selection-end="-1"
					@confirm="sendMsg('message')"
					@focus="inputFocus"
					confirm-type="send"
				/>
				<view class="iconfont iconemoji_icon ns-padding-right " @click="openEmjoy()"></view>
				<view class="iconfont iconjia ns-padding-right" @click="openChatMore()"></view>
				<!-- <view
					class="iconfont iconmn_fasong_fill ns-padding-left ns-padding-right"
					@click="sendMsg('message')"
					:class="formData.content.trim() ? 'ns-text-color' : ''"
				></view> -->
			</view>
			<view class="emjoy-box" @touchmove.prevent.stop v-if="emjoyShow">
				<scroll-view scroll-y="true" class="emjoy-content">
					<view class="emjoy-item" v-for="(item, index) in emjoyList" :key="index" @click="addEmjoy(item,index)">
						<image :src="$util.img(item)" mode=""></image>
					</view>
				</scroll-view>
			</view>
			<view class="chat_send " 
				  v-if="emjoyShow"
				  @click="sendMsg('message')"
				 >
				<view class="emjoy_list"></view>
				<view class="send"  :class="formData.content.trim() ? '' : 'ns-bg-color-grays'">发送</view>
			</view>
			<view class="more_send" v-if="chatMore">
				<view class="more_send-item"  @click="addImg()">
					<i class="iconfont icontupian1 "></i>
					<view>图片</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import SocketTask from '@/common/js/socketTest.js';
import chatMessage from '@/components/chat-message/chat-message.vue';
import emjoy from '@/common/js/emjoy.js';
export default {
	components: {
		chatMessage
	},
	data() {
		return {
			emjoyList: emjoy.emjoyList,
			emjoyShow:false,
			chatMore:false,
			formData: {
				content: '',
				goods_id: 0,
				order_id: 0,
				image:''
			},
			isNetWork: false,
			send: false,

			messageList: [],
			page: 1,
			isAll: false,
			isLoading: 0,
			showLoading: false, //显示正在加载

			jumpBottom: null,
			scrollTop: 0,
			scrollPosition: 0,

			siteId: 0, //店铺id
			skuId: 0, //商品id
			orderId: 0, //订单id
			siteName: '', //店铺名称
			shopInfo: {},
			userInfo: {},
			style:{}//聊天框的高度
		};
	},
	mixins: [SocketTask],
	computed:{
		chatBottom(){
			return this.emjoyShow || this.chatMore
		}
	},
	onLoad(info) {
		if(uni.getStorageSync('token')){
			this.getUserInfo();
		}else{
			this.$util.redirectTo('/pages/login/login/login');
			return;
		}
		
		if (info.siteId) {
			this.siteId = info.siteId;
			this.getShopInfo();
		} else {
			this.$util.showToast({ title: '缺少必要参数' });
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
			return;
		}

		this.skuId = info.skuId ? info.skuId : 0;
		this.orderId = info.orderId ? info.orderId : 0;

		if (this.skuId || this.orderId) {
			this.send = true;
		}
	},
	methods: {
		openChatMore(){
			console.log(this.chatMore)
			this.chatMore=!this.chatMore;
			this.emjoyShow=false;
			uni.pageScrollTo({scrollTop: 99999, duration: 0});
		},
		//获取店铺详情
		getShopInfo() {
			if(this.siteId == 0){
				this.siteName = '平台客服';
				//修改标题
				uni.setNavigationBarTitle({
					title: this.siteName
				});
			}else{
				this.$api.sendRequest({
					url: '/api/shop/info',
					data: {
						site_id: this.siteId
					},
					success: res => {
						if (res.code == 0) {
							this.shopInfo = res.data;
							this.siteName = res.data.site_name;
							//修改标题
							uni.setNavigationBarTitle({
								title: this.siteName
							});
						}
					}
				});
			}
			
		},
		//获取个人信息
		getUserInfo() {
			this.$api.sendRequest({
				url: '/api/member/info',
				success: res => {
					if (res.code == 0) {
						this.userInfo = res.data;
					}
				}
			});
		},
		//获取聊天记录
		getChatList() {
			let that = this;
			if (this.isAll) return;
			if (this.isLoading) return;
			this.isLoading = true;
			if (this.page == 1) this.messageList = [];
			this.$api.sendRequest({
				url: '/servicer/api/chat/dialogs',
				data: {
					servicer_id: this.servicer_id,
					page: this.page,
					limit: 5,
					site_id: that.siteId
				},
				success(res) {
					that.page += 1;
					if (res.code >= 0 && res.data) {
						if (res.data.list && res.data.list.length < 5) that.isAll = true;
						let startId = 0;
						if (this.messageList) {
							startId = this.messageList.slice(-1).id + 1;
						}

						let newArr = [];
						if (that.page == 2) {
							//如果请求的是第一页，并且有订单id或商品id;添加发送信息
							if (that.skuId) {
								let obj = {
									id: startId,
									isItMe: true,
									contentType: 'sendGood',
									sku_id: that.skuId
								};
								newArr.push(obj);
								startId += 1;
							}
							if (that.orderId) {
								let obj = {
									id: startId,
									isItMe: true,
									contentType: 'sendOrder',
									order_id: that.orderId,
								};
								newArr.push(obj);
								startId += 1;
							}
						}

						//如果获取到历史聊天信息  转换为需要的格式  添加到数组内
						let arr = res.data.list;
						if (arr.length) {
							for (let i = 0; i < arr.length; i++) {
								let obj = {};
								if (arr[i].content_type == 0) {
									obj.id = startId;
									obj.content = arr[i].type == 0 ? arr[i].consumer_say : arr[i].servicer_say;
									obj.isItMe = arr[i].type == 0 ? true : false;
									obj.contentType = 'string';
									obj.sendStatus=true;
								} else if (arr[i].content_type == 1) {
									obj.id = startId;
									obj.isItMe = arr[i].type == 0 ? true : false;
									obj.contentType = 'goods';
									obj.sku_id = arr[i].goods_sku_id;
									obj.send = false;
									obj.sendStatus=true;
								} else if (arr[i].content_type == 2) {
									obj.id = startId;
									obj.isItMe = arr[i].type == 0 ? true : false;
									obj.contentType = 'order';
									obj.order_id = arr[i].order_id;
									obj.send = false;
									obj.sendStatus=true;
								}else if (arr[i].content_type == 3) {
									obj.id = startId;
									obj.isItMe = arr[i].type == 0 ? true : false;
									obj.contentType = 'image';
									obj.id = startId;
									obj.image = arr[i].type == 0 ? arr[i].consumer_say : arr[i].servicer_say;
									obj.sendStatus=true;
								}
								newArr.push(obj);
								console.log(newArr)
								startId += 1;
							}
						}

						//如果请求的是第一页  将在线信息作为消息添加到数组内
						if (that.page == 2) {
							let obj = {};
							obj.id = startId;
							if (that.servicer_id > 0) {
								obj.contentType = 'online';
							} else if (that.servicer_id == 0) {
								obj.contentType = 'noline';
							}
							newArr.push(obj);
							startId += 1;
						}
						that.isLoading = false;
						if (newArr.length) {
							that.messageList = newArr.concat(that.messageList);
							that.$nextTick(() => {
								if (that.page == 2) {
									that.setPageScrollTo();
								} else {
									let id = '#chat' + newArr.length;
									that.setPageScrollTo(id);
								}
							});
						}
					} else {
						this.$util.showToast({ title: res.message });
					}
				}
			});
		},
		// 设置页面滚动位置
		setPageScrollTo(id) {
			if (id) {
				let view = uni
					.createSelectorQuery()
					.in(this)
					.select(id);
				view.boundingClientRect(res => {
					uni.pageScrollTo({
						scrollTop: res.top - 30, // -30 为多显示出大半个消息的高度，示意上面还有信息。
						duration: 0
					});
				}).exec();
			} else {
				let query = uni.createSelectorQuery().in(this);
				query
					.select('.room-content-box')
					.boundingClientRect(data => {
						uni.pageScrollTo({
							scrollTop: data.height, // -30 为多显示出大半个消息的高度，示意上面还有信息。
							duration: 0
						});
					})
					.exec();
			}
		},
		//发送商品
		sendGood(e,index) {
			
			this.sendMsg('goods');
			this.messageList.splice(index,1,1);
		},
		//发送订单
		sendOrder(e,index) {
			this.sendMsg('order');
			this.messageList.splice(index,1,1);
			
		},
		//发送消息
		sendMsg(data) {
			if (this.isNetWork) return;
			this.isNetWork = true;
			let that = this;
			if (data == 'goods') {
				this.$api.sendRequest({
					url: '/servicer/api/chat/say',
					data: {
						goods_id: this.skuId,
						servicer_id: this.servicer_id,
						content_type: 1,
						site_id: this.siteId
					},
					success(res) {
						that.send = false;
						that.joinData('send', 'goods');
					},
					complete() {
						that.isNetWork = false;
						uni.hideKeyboard();
					}
				});
			} else if (data == 'order') {
				this.$api.sendRequest({
					url: '/servicer/api/chat/say',
					data: {
						order_id: this.orderId,
						servicer_id: this.servicer_id,
						site_id: this.siteId,
						content_type: 2
					},
					success(res) {
						that.send = false;
						that.joinData('send', 'order');
					},
					
					complete() {
						that.isNetWork = false;
						uni.hideKeyboard();
					}
				});
			}else if (data == 'image') {
				that.joinData('send', 'image');
				this.$api.sendRequest({
					url: '/servicer/api/chat/say',
					data: {
						message: this.formData.image.trim(),
						servicer_id: this.servicer_id,
						site_id: this.siteId,
						content_type: 3
					},
					success(res) {
						// that.joinData('send', 'string');
						that.formData.content = '';
					},
					error(){
						that.messageList[that.messageList.length-1].sendStatus = false;
						that.formData.content = '';
					},
					complete() {
						that.isNetWork = false;
						uni.hideKeyboard();
					}
				});
			} else {
				// this.closePopWindow()
				if (!this.formData.content.trim()) {
					this.$util.showToast({ title: '发送内容不能为空' });
					that.isNetWork = false;
					return;
				}
				that.joinData('send', 'string');
				this.$api.sendRequest({
					url: '/servicer/api/chat/say',
					data: {
						message: this.formData.content.trim(),
						servicer_id: this.servicer_id,
						site_id: this.siteId,
						content_type: 0
					},
					success(res) {
						// that.joinData('send', 'string');
						that.formData.content = '';
					},
					error(){
						that.messageList[that.messageList.length-1].sendStatus = false;
						that.formData.content = '';
					},
					complete() {
						that.isNetWork = false;
						uni.hideKeyboard();
					}
				});
			}
		},
		//拼接消息 处理滚动
		async joinData(addType, contentType) {
			if (addType == 'send') {
				let data = {
					isItMe: true,
					contentType: contentType,
					sendStatus:true
				};
				if (contentType == 'string') {
					data.content = this.formData.content;
				} else if (contentType == 'order') {
					data.order_id = this.orderId;
				} else if (contentType == 'goods') {
					data.sku_id = this.skuId;
				}else if (contentType == 'image') {
					data.image = this.formData.image;
				}
				this.messageList.push(data);
				// this.formData.content = '';
				this.$nextTick(() => {
					this.setPageScrollTo();
				});
			}
		},
		// 隐藏加载提示
		hideLoadTips(flag) {
			if (flag) {
				this.ajax.loadText = '消息获取成功';
				setTimeout(() => {
					this.ajax.loading = false;
				}, 300);
			} else {
				this.ajax.loading = true;
				this.ajax.loadText = '正在获取消息';
			}
		},
		onPageScroll(e) {
			if (e.scrollTop < 5 && e.scrollTop >= 0) {
				this.getChatList();
			}
		},
		inputFocus(e){
			console.log(e)
			this.emjoyShow=false;
			this.chatMore = false;
		},
		closePopWindow(){
			this.emjoyShow = false;
			this.chatMore = false;
			uni.hideKeyboard();
		},
		openEmjoy(){
			uni.hideKeyboard();
			this.chatMore=false;
			this.emjoyShow=!this.emjoyShow;
			uni.pageScrollTo({scrollTop: 99999, duration: 0});
		},
		addEmjoy(emjoy,index){
			this.formData.content=this.formData.content+index;
			
		},
		addImg(){
			this.$util.upload(1, {
				path: 'chatimg'
			}, res => {
				this.formData.image = res[0];
				// this.chatMore = false;
				this.sendMsg('image')
			});
			
		}
	},
	beforeDestroy() {
		clearInterval(this.timeoutObj);
		this.timeoutObj = null;
		this.$api.sendRequest({
			url: '/servicer/api/chat/bye',
			data: {
				servicer_id: this.servicer_id,
				site_id: this.siteId
			},
			success(res) {
				uni.closeSocket();
			}
		});
	}
};
</script>

<style lang="scss">

.more_send{
	display: flex;
	border-top: 2rpx solid #E5E5E5;
	height:368rpx;
	flex-wrap: wrap;
	>view{
		padding-top: 16rpx;
		width:25%;
		height:156rpx;
		// line-height: 174rpx;
		text-align: center;
		.iconfont{
			display: inline;
			// line-height: 174rpx;
			font-size: 60rpx;
			color: #333;
			background-color: #fff;
			border-radius: 20rpx;
			padding:20rpx
		}
		>view{
			color: #909399;
			font-size: $ns-font-size-sm;
		}
		
	}
}
.chat_send{
	display: flex;
	
	justify-content: space-between;
	.send{
		background-color: $base-color;
		color:#fff;
		align-self: flex-end;
		font-size: 28rpx;
		padding:10rpx 20rpx
	}
	.emjoy_list{flex:1}
}
/* 加载数据提示 */
.tips {
	position: fixed;
	left: 0;
	top: var(--window-top);
	width: 100%;
	z-index: 9;
	background-color: rgba(0, 0, 0, 0);
	height: 72rpx;
	line-height: 72rpx;
	transform: translateY(-80rpx);
	transition: transform 0.3s ease-in-out 0s;
	font-size: 24rpx;
	text-align: center;
	line-height: 72rpx;
	&.show {
		transform: translateY(0);
	}
}
.room {
	width: 100%;
	/* #ifdef H5 */
	min-height: calc(100vh - 24px);
	padding-bottom: calc(110rpx + 44px);
	padding-bottom: calc(110rpx + 44px + constant(safe-area-inset-bottom));
	padding-bottom: calc(110rpx + 44px + env(safe-area-inset-bottom));
	/* #endif */

	/* #ifndef H5 */
	min-height: calc(100vh + 10px);
	padding-bottom: 110rpx;
	padding-bottom: calc(110rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
	/* #endif */

	box-sizing: border-box;

	.room-content-box {
		width: 100%;
		min-height: calc(100% + 10px);
		padding-top: $ns-padding;
		box-sizing: border-box;
	}
}
.paddingbottom{
	padding-bottom: calc(470rpx + 44px);
}
.emjoy-box{
	width: 100%;
	height: 300rpx;
	padding: 20rpx 25rpx;
	box-sizing: border-box;
	background: #F4F4F4;
	border-top: 1rpx solid #E5E5E5;
	border-bottom: 1rpx solid #E5E5E5;
	// position: fixed;
	// left: 0;
	// bottom: 90rpx;
	// bottom: calc(90rpx + constant(safe-area-inset-bottom));
	// bottom: calc(90rpx +  env(safe-area-inset-bottom));
	.emjoy-content{
		width: 100%;
		height: 100%;
		.emjoy-item{
			display: inline-block;
			width: 100rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			image{
				display: inline-block;
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
}
.input-content {
	background: #F4F4F4;
	width: 100%;
	min-height: 110rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	padding-bottom: 0px;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	.input-box {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 $ns-padding;
		box-sizing: border-box;
		.iconfont {
			line-height: 1;
			font-size: 40rpx;
			padding: 15rpx;
		}
		input {
			margin-left: 20rpx;
			margin-right: 20rpx;
			width: 630rpx;
			height: 100%;
			height: 72rpx;
			padding: 0 20rpx;
			font-size: $ns-font-size-base;
			background-color: #fff;
			border-radius: 8rpx;
			// background: #f5f5f5;
		}
	}
}
</style>
